<template>
  <el-dialog
          :model-value="visible"
          title="创建网络视频"
          :before-close="cancelCreateDialog"
  >
    <el-tabs type="border-card" :model-value="activeNamed" @tab-click="handleClickTabs">
      <el-tab-pane label="点播介质" name="vod">
        <el-form
                ref="vodVideoFormRef"
                :model="createFormData"
                label-width="100px"
                :rules="vodVideoRules"
        >
          <el-form-item label="所属部门" prop="groupid_list" class="group-list">
            <el-checkbox-group v-model="createFormData.groupid_list">
              <el-checkbox
                      v-for="group in groupList"
                      :key="group.groupid"
                      :label="group.groupid"
                      name="groupid_list"
              >{{group.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="视频名称" prop="name">
            <el-input placeholder="请输入视频介质名称" v-model="createFormData.name" />
          </el-form-item>
          <el-form-item label="视频地址" prop="url">
            <el-input placeholder="请输入视频介质URL地址" v-model="createFormData.url" />
          </el-form-item>
          <el-form-item label="文件类型" prop="mimetype">
            <el-select placeholder="请选择视频介质的文件类型" v-model="createFormData.mimetype">
              <el-option
                      v-for="mime in videoMimeTypeList"
                      :key="mime.mimeid"
                      :value="mime.mimeid"
                      :label="mime.mimename"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="画幅类型" prop="layout">
            <el-select placeholder="请选择视频介质的画幅类型" v-model="createFormData.layout">
              <el-option
                v-for="lay in layoutList"
                :key="lay.layoutid"
                :label="lay.layoutname"
                :value="lay.layoutid"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="直播介质" name="live">
        <el-form
                ref="liveVideoFormRef"
                :model="createFormData"
                label-width="120px"
                :rules="liveVideoRules"
                style="height: 320px;overflow-y: scroll"
        >
          <el-form-item label="所属部门" prop="groupid_list" class="group-list">
            <el-checkbox-group v-model="createFormData.groupid_list">
              <el-checkbox
                      v-for="group in groupList"
                      :key="group.groupid"
                      :label="group.groupid"
                      name="groupid_list"
              >{{group.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="视频名称" prop="name">
            <el-input placeholder="请输入视频介质名称" v-model="createFormData.name" />
          </el-form-item>
          <el-form-item label="视频地址" prop="url">
            <el-input placeholder="请输入视频介质URL地址" v-model="createFormData.url" />
          </el-form-item>
          <el-form-item label="文件类型" prop="mimetype">
            <el-select placeholder="请选择视频介质的文件类型" v-model="createFormData.mimetype">
              <el-option
                      v-for="mime in videoMimeTypeList"
                      :key="mime.mimeid"
                      :value="mime.mimeid"
                      :label="mime.mimename"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="画幅类型" prop="layout">
            <el-select placeholder="请选择视频介质的画幅类型" v-model="createFormData.layout">
              <el-option
                      v-for="lay in layoutList"
                      :key="lay.layoutid"
                      :label="lay.layoutname"
                      :value="lay.layoutid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="直播推流地址" prop="pushurl">
            <el-input placeholder="请输入直播推流URL地址" v-model="createFormData.pushurl" />
          </el-form-item>
          <el-form-item label="直播时移地址" prop="shifturl">
            <el-input placeholder="请输入直播时移URL地址" v-model="createFormData.shifturl" />
          </el-form-item>
          <el-form-item label="直播回看地址" prop="reviewurl">
            <el-input placeholder="请输入直播回看地址或文件FID" v-model="createFormData.reviewurl" />
          </el-form-item>
          <el-form-item label="直播协议" prop="protocol">
            <el-select placeholder="请选择直播协议" v-model="createFormData.protocol">
              <el-option
                      v-for="protocol in videoProtocolList"
                      :key="protocol.protocolid"
                      :label="protocol.protocolname"
                      :value="protocol.protocolid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="直播状态" prop="livestate">
            <el-select placeholder="请选择直播状态" v-model="createFormData.livestate">
              <el-option
                      v-for="livestate in livestateList"
                      :key="livestate.stateid"
                      :value="livestate.stateid"
                      :label="livestate.statename"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="直播开始时间" prop="starttime">
            <el-date-picker
                    v-model="createFormData.starttime"
                    type="datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择直播开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="直播结束时间" prop="endtime">
            <el-date-picker
                    v-model="createFormData.endtime"
                    type="datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择直播结束时间"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div align="center">
        <el-button type="default" size="small" @click="cancelCreateDialog">取消</el-button>
        <el-button type="primary" size="small" @click="handleConfirmCreate">确定创建</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, reactive, ref} from 'vue'
  import {
    layoutList,
    videoMimeTypeList,
    videoProtocolList,
    livestateList
  } from "@/utils/usage-config";
  import {createThirdVideo} from "@/api/media/video";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreateVideo",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object
      },
      groupList: {
        type: Array,
        default() {
          return []
        }
      },
      activeName: {
        type: String,
        default: 'vod'
      }
    },
    emits: ['cancelCreateDialog', 'resetCreateFormData', 'reloadVideoData'],
    setup(props, context) {
      const createFormData = toRef(props, 'formData')
      const activeNamed = toRef(props, 'activeName')
      const liveVideoRules = reactive({
        groupid_list: [{required: true, message: '请选择所属部门', trigger: 'change'}],
        name: [{required: true, message: '请输入视频介质名称', trigger: 'blur'}],
        url: [{required: true, message: '请输入视频介质URL地址', trigger: 'blur'}]
      })
      const vodVideoRules = reactive({
        groupid_list: [{required: true, message: '请选择所属部门', trigger: 'change'}],
        name: [{required: true, message: '请输入视频介质名称', trigger: 'blur'}],
        url: [{required: true, message: '请输入视频介质URL地址', trigger: 'blur'}],
        mimetype: [{required: true, message: '请选择视频介质文件类型', trigger: 'change'}]
      })
      const vodVideoFormRef = ref(null)
      const liveVideoFormRef = ref(null)

      const cancelCreateDialog = () => {
        context.emit('cancelCreateDialog')
      }
      const handleClickTabs = (tab) => {
        context.emit('resetCreateFormData', tab.props.name)
        createFormData.value.videotype = tab.props.name
      }
      const handleConfirmCreate = () => {
        if (createFormData.value.videotype == 'vod') {
          vodVideoFormRef.value.validate(valid => {
            if (valid) {
              postFormData()
            }
          })
        } else {
          liveVideoFormRef.value.validate(valid => {
            if (valid) {
              postFormData()
            }
          })
        }
      }
      const postFormData = () => {
        createThirdVideo(createFormData.value).then(response => {
          if (response.errcode == 0) {
            ElMessage({type: 'success', message: response.msg, duration: 2000})
            cancelCreateDialog()
            context.emit('reloadVideoData')
          } else {
            ElMessage({type: 'error', message: response.msg, duration: 2000})
          }
        })
      }
      return {
        cancelCreateDialog,
        createFormData,
        activeNamed,
        handleClickTabs,
        layoutList,
        videoMimeTypeList,
        liveVideoRules,
        vodVideoRules,
        videoProtocolList,
        livestateList,
        handleConfirmCreate,
        vodVideoFormRef,
        liveVideoFormRef
      }
    }
  }
</script>
<style lang="scss">
  .group-list{
    margin-bottom:15px;
    .el-form-item__label{
      line-height:normal;
    }
    .el-form-item__content{
      line-height:normal;

      .el-checkbox{
        height:auto;
        margin-top:3px;
        margin-bottom:5px;
      }
    }
  }

</style>
<style scoped>
.el-input,.el-select{
    width:90%;
  }
</style>
